<template>
	<template v-if="isAlready">
				<img style="margin-left: 5px;" width="20" height="16" v-for="(imageUrl, index) in imageUrls" :key="index" :src="imageUrl" @click="previewImage(imageUrl)" />
		<template>
			<el-dialog v-model="dialogVisible" :z-index="9999">
				<el-image v-if="imageUrl" :src="imageUrl" :preview-src-list="[imageUrl]" :zIndex="99999"/>
			</el-dialog>
		</template>
	</template>
</template>
<script>
	import tool from "@/utils/tool";
	export default {
		name: "exLabel",
		computed: {
			tool() {
				return tool
			}
		},
		props: {
			format: {type: Boolean, default: false},//字典代码，不用设置，格式化时，添加此属性
			code: {type: String, default: ""},//字典代码或格式化的代码 ID_CARD | NAME | PHONE | MONEY | DATETIME | DATE | ICON
			value: {type: String, default: ""},
			width: {type: Number, default: 50},
			height: {type: Number, default: 50},
			border: {type: Number, default: 0},
			bool: {type: Boolean, default: true},
		},
		data() {
			return {
				imageUrls: [],
				imageUrl:'',
				isAlready:false,
				dialogVisible: false,
				minioServerUrl:'',
			};
		},
		async mounted() {
			this.minioServerUrl = await this.$TOOL.minioServerUrl();
			if (this.value) {
				let imageUrls = this.value.split(',');
				 imageUrls.forEach(item => {
					 this.imageUrls.push(this.minioServerUrl + item)
				})
			}
			this.isAlready = true
		},
		methods: {
			previewImage(imageUrl) {
				this.imageUrl = '';
				this.imageUrl = imageUrl
				this.dialogVisible = true;
				window.open(imageUrl);
			}
		}
	}
</script>
